<style scoped>
.wraper {
    padding: 0 30px;
}

.search {
    padding-bottom: 20px;
}

.search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}

.search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}

.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}

.detail {
    border-top: 1px dashed #cccccc;
}

.wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
}

.wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}

.iconfont {
    font-size: 14px;
}

.red-font {
    color: #ff1f1f;
}

/* 分页 start */

.page {
    margin: 20px 0;
}
.ivu-page {
    padding-bottom: 150px;
} 

/* 分页 end */


</style>

<template>
    <div class="employee-manage">
        <product-title></product-title>
        <div class="wraper">
            <div class="search">
                <span>快速搜索</span>
                <Input v-model="searchForm.name" placeholder="请输入代理人姓名" style="width: 140px"></Input>
                <Input v-model="searchForm.job_num" placeholder="请输入代理人工号" style="width: 140px"></Input>
                <Select v-model="searchForm.rank" style="width:140px" placeholder='请选择级别'>
                    <Option value="0" >全部</Option>
                    <Option :value="item.id" v-for="item in rankList" :key="item.id" >{{item.name}}</Option>
                </Select>
                <DatePicker type="month" :options="options" v-model="searchForm.datetime"  format="yyyy-MM" placeholder="选择日期" style="width: 120px" @on-change="dateChange"></DatePicker>
                <Button @click='search'>查询</Button>
            </div>
            <div class="detail">
                <div class="headline">
                    <p>
                        <span class="red-font">提示</span>：
                    </p>
                </div>
                <div class="clearfix">
                    <Table border :columns="columns_employee" :data="data_employee"></Table>
                    <Row class="page fr">
                        <Col span="24">
                            <Page :total="employeeTotal" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                        </Col>
                    </Row>
                </div>
            </div>
        </div> 
        <Modal v-model="showModal"  title="考核明细" width="1000">
            <Table border :columns="commission" :data="data_commission"></Table>
            <div slot="footer" class="check-result">
            </div>
        </Modal>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { getCommissionList} from '../../api/settlement'
import { getRankList} from '../../api/rank'
import { getPerformanceMonth} from '../../api/achievement'
import { formatTime } from '../../libs/time'
export default {
    data() {
        return {
            options: {
                disabledDate (date) {
                    let _date = formatTime(new Date(),'yyyy-MM')
                    return date && date.valueOf() >= (new Date(_date).getTime() - 86400000)
                }
            },
            page: 1,
            pagesize: 10,
            searchForm: {
                name: '',
                datetime:new Date(formatTime(new Date(),'yyyy-MM')).getTime() - 86400000,
            },
            rankList:[],
            showModal:false,
            employeeTotal: 0,
            commissionTotal:0,
            columns_employee: [
                {
                    title: '工号',
                    key: 'job_num',
                    align: 'center',
                },
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '新契约件数',
                    key: 'agreement',
                    align: 'center',
                },
                {
                    title: '首佣',
                    key: 'fyc',
                    align: 'center',
                },
                {
                    title: '续佣',
                    key: 'continued_commission',
                    align: 'center',
                }, 
                {
                    title: '佣金合计',
                    key: 'total_commission',
                    align: 'center',
                },
                {
                    title: '年度',
                    key: 'year',
                    align: 'center',
                },
                {
                    title: '月份',
                    key: 'month',
                    align: 'center',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',                                   
                                },
                                on: {
                                    click: () => {
                                        this.getPerformance(params.row.uid,params.row.year,params.row.month)
                                    }
                                }
                            }, '明细'),                     
                        ]);
                    }
                },
            ],
            data_employee: [

            ],
            commission: [
                {
                    title: '保单号',
                    key: 'policy_no',
                    align: 'center',
                },
                {
                    title: '代理人',
                    key: 'agent_name',
                    align: 'center',
                },
                {
                    title: '投保人',
                    key: 'au_name',
                    align: 'center',
                },
                {
                    title: '产品',
                    key: 'pname',
                    align: 'center',
                }
                ,
                {
                    title: '交费时间',
                    key: 'pay_time',
                    align: 'center',
                }
                ,
                {
                    title: '保费',
                    key: 'premium',
                    align: 'center',
                }
                ,
                {
                    title: '佣金',
                    key: 'fee_amount',
                    align: 'center',
                }
            ],
            data_commission: [

            ]
        }
    },
    components: {
        productTitle
    },
    created() {
        let _time = new Date(formatTime(new Date(),'yyyy-MM')).getTime() - 86400000
        this.searchForm.date =formatTime(new Date(_time),'yyyy-MM') 
        this.getList()
        this.getRank()
    },
    methods: {
        showmodal(){
            this.showModal = true
        },
        //获取职级列表
        getRank() {
            new Promise((resolve, reject) => {
                getRankList().then(response => {
                    if (response.data.err == 0) {
                        this.rankList = response.data.data;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        // 搜索
        search() {
            this.page = 1
            this.getList();
        },
        dateChange(date) {
            if(date){
                this.searchForm.date = date
                var dataarry = date.split("-")
                this.searchForm.year = dataarry[0]
                this.searchForm.month = dataarry[1]
            }else{
                this.searchForm.date = ''
            }
            
        },
        // 获取员工列表
        getList() {
            let _params = {
                'p': this.page,
                'pagesize': this.pagesize,
                'name': this.searchForm.name,
                'job_num': this.searchForm.job_num,
                'rank': this.searchForm.rank,
                // 'year': this.searchForm.year,
                // 'month': this.searchForm.month
                // 'rank': this.searchForm.rank,
                // 'agency_name':this.searchForm.agency_name,
                // 'sex':this.searchForm.sex,
                'date':this.searchForm.date
            }
            new Promise((resolve, reject) => {
                getCommissionList(_params).then(response => {
                    if (response.data.err == 0) {
                        this.data_employee = response.data.data.list;
                        this.employeeTotal = response.data.data.total;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        //
        getPerformance(uid,year,month){
            this.showModal = true
            let _params = {
                uid: uid,
                date:year + '-' + month
            }
            new Promise((resolve, reject) => {
                getPerformanceMonth(_params).then(response => {
                    console.log(response.data);
                    if (response.data.err == 0) {
                        this.data_commission = response.data.data
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        // 页码改变
        pageChange(page) {
            this.page = page
            this.getList()
        },
        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize
            this.getList();
        },

    }
}
</script>
